<template>
    <div>
      <el-form
          :model="expense"
          label-width="80px"
          style="margin-top: 60px;margin-left: 420px"
          :rules="rules"
          ref="ruleForm">
        <el-form-item label="报销日期" prop="expenseData">
            <el-date-picker type="date" placeholder="选择日期" v-model="expense.expenseData" style="width: 150px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="报销价格" prop="expensePrice">
          <el-input v-model="expense.expensePrice" placeholder="请输入内容" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item label="报销详情" prop="expenseDetail">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="expense.expenseDetail"
            style="width: 350px;">
        </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import { addExpense } from '../../../api/stu/expense'

export default {
  data() {
    return {
      expense: {
        expenseData: '',
        expenseDetail: '',
        expensePrice: 0
      },
      rules: {
        expenseDetail: [
          { required: true, message: '请输入详情', trigger: 'blur' },
          { max: 100, message: '小于100个字符', trigger: 'blur' }
        ],
        expensePrice: [
          { required: true, message: '费用不能为空' }
        ],
        expenseData: [
          { type: 'date', required: true, message: '请选择报销日期', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 提交申请请求
          addExpense(this.expense).then(response=>{
            this.$message({
              message: response.msg,
              type: 'success'
            })
            this.resetForm('ruleForm')
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
